<script setup lang='ts'>
import { ArticleInfo } from '@/models/article';
import { ref, onMounted } from 'vue';
import Nav from '@/components/index/Nav.vue';
import { articleService } from '@/services/article.service';
import { appRef } from '@/models/app.ref';
import { FormatDate } from '@/utils/common.methods';

const list = ref([] as ArticleInfo[]);
const page = ref(1);
const number = 10;
onMounted(() => {
  window.addEventListener('scroll', onScroll);
  getList();
})

const loading = ref(false);
function getList(): void {
  loading.value = true;
  articleService.list(page.value, number).then((res) => {
    res?.map(val => list.value.push(val));
    setTimeout(() => loading.value = false, 500);
  })
}

function onScroll(): void {
  if (page.value * number > appRef.article.total) return;
  const clientHeight = document.documentElement.clientHeight;
  const scrollTop = document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight;
  // 滚动到了底部
  const bottom = scrollHeight - (clientHeight + scrollTop);
  if (bottom < 1) {
    page.value++
    getList();
  }
}

function toDetail(item: ArticleInfo): void {
  window.open(location.origin + '/#article/detail/' + item.id);
}

</script>
<template>
  <div class="list">
    <Nav />
    <div class="main">
      <div class="group">
        <div class="item" v-for="item in list" :key="item.id" @click="toDetail(item)">
          <div class="title"> {{ item.title }} </div>
          <div class="flex body">
            <img class="cover" :src="item.cover" alt="">
            <div class="desc ellipsis3"> {{ item.desc }} <br /><br /> {{ item.content }} </div>
          </div>
          <div class="bottom flex">
            <div class="author">
              作者：<span v-for="author in item.author">{{ author }}</span>
            </div>
            <div class="date"> {{ FormatDate(item.created * 1000, 'yyyy年MM月dd日') }} </div>
          </div>
        </div>
      </div>
      <a-spin style="width: 100%;text-align: center; margin-top: 20px;" :size="36" v-if="loading" />
      <div class="more flex-c" v-if="!loading && page * number > appRef.article.total">暂无更多资讯</div>
    </div>
    <a-back-top target-container=".group" :style="{ position: 'absolute' }" />
  </div>
</template>
<style lang='scss' scoped>
.list {
  background: var(--color-bg-1);
}
.main {
  margin-top: 80px;
  margin: 70px auto 20px;

  .group {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 1px 3px var(--color-neutral-3);


    .item {
      padding: 20px;
      border-bottom: 1px solid var(--color-neutral-2);
      cursor: pointer;

      .title {
        color: var(--color-neutral-10);
        line-height: 1.6;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
      }

      .body {
        align-items: flex-start;

        .cover {
          width: 200px;
          min-width: 200px;
          height: 100px;
          object-fit: cover;
          margin-right: 20px;
        }

        .desc {
          color: var(--color-neutral-10);
          line-height: 18px;
          line-clamp: 5;
          -webkit-line-clamp: 5;
        }
      }

      .bottom {
        margin-top: 20px;
        justify-content: space-between;

        .date {
          color: var(--color-neutral-5);
        }
      }

      &:hover {
        .title {
          color: rgb(var(--arcoblue-4));
        }
      }
    }

  }

  .more {
    color: var(--color-neutral-5);
    font-size: 13px;
    margin-top: 50px;
  }
}
</style>